<template>
  <section class="root_login">
    <div class="root_login_main">
      <div class="tab" @click="tabChange">
        {{ isNotTelephone ? "手机登录" : "账密登录" }}
      </div>
      <div class="title">
        <el-avatar shape="square" :size="50" :src="imgDict.logo" />
        <h1 class="name">{{ config.root.title }}</h1>
      </div>
      <el-form ref="form" :model="form" :rules="rules" class="content">
        <template v-if="isNotTelephone">
          <el-form-item prop="username">
            <el-input
              v-model="form.username"
              prefix-icon="el-icon-user"
              :placeholder="`${config.root.input}${config.login.username}`"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              prefix-icon="el-icon-lock"
              :placeholder="`${config.root.input}${config.login.password}`"
              size="medium"
              type="password"
              @keyup.enter.native="save"
            ></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item prop="telephone">
            <el-input
              v-model="form.telephone"
              prefix-icon="el-icon-user"
              placeholder="请输入手机号"
              size="medium"
            ></el-input>
          </el-form-item>
          <el-form-item prop="captcha">
            <el-input
              v-model="form.captcha"
              prefix-icon="el-icon-lock"
              placeholder="请输入验证码"
              size="medium"
              type="password"
              @keyup.enter.native="save"
            >
              <el-button
                slot="append"
                :disabled="disabledCodeBtn"
                @click="getSMScode"
                >{{ codeText }}</el-button
              >
            </el-input>
          </el-form-item>
        </template>
        <el-form-item prop="remember-me">
          <el-checkbox
            v-model="form['remember-me']"
            true-label="1"
            false-label="0"
            >是否保持在线</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button
            class="login-button"
            type="primary"
            size="medium"
            @click="login"
            :loading="loading"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item class="login-other">
          <div class="attr transition" @click="link('/register')">注册</div>
          <!-- <div class="attr transition" @click="link('/forgetPassword')">
            忘记密码
          </div> -->
        </el-form-item>
      </el-form>
    </div>
  </section>
</template>

<script>
import imgDict from "@/utils/img";
import Mixin from "@/mixins/form";
import apiCode from "@/api/apiConfig";

export default {
  name: "login",
  mixins: [Mixin],
  components: {},
  filters: "",
  data() {
    return {
      imgDict, // 图片
      loading: false, // 按钮loading
      isNotTelephone: true,
      disabledCodeBtn: false,
      codeText: "获取验证码",
      form: {
        username: "", // 登录名
        password: "", // 密码
        telephone: "",
        captcha: "",
        "remember-me": "0",
      },
      rules: {
        username: [
          {
            required: true,
            message: `${this.config.root.input}${this.config.login.username}`,
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: `${this.config.root.input}${this.config.login.password}`,
            trigger: "blur",
          },
        ],
        telephone: [
          {
            required: true,
            message: `请输入正确的手机号码`,
            trigger: "blur",
          },
          {
            pattern:
              /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
            message: "手机号码格式不正确",
          },
        ],
        captcha: [
          {
            required: true,
            message: `请输入验证码`,
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    tabChange() {
      let isNotTelephone = this.isNotTelephone;
      this.isNotTelephone = !isNotTelephone;
      this.$refs.form.clearValidate();
    },
    async login() {
      const status = this.$formValidate();
      if (!status) {
        return;
      }
      let result;
      this.loading = true;
      if (this.isNotTelephone) {
        result = await this.$post("api/auth/signin", this.form);
      } else {
        result = await this.$post("api/auth/sms/signin", this.form);
      }
      this.loading = false;
      this.save(result);
    },
    save(result) {
      if (result && result.code === apiCode.code.success) {
        let menus = [
          { path: "*", meta: null, menu: false, children: null },
          { path: "/login", meta: null, menu: false, children: null },
          {
            path: "/",
            meta: { title: "数字经济图书馆" },
            menu: false,
            children: [
              {
                path: "/",
                meta: { title: "数字经济图书馆" },
                menu: false,
                children: null,
              },
            ],
          },
          {
            path: "/account",
            icon: "el-icon-user",
            meta: { title: "我的" },
            menu: true,
            children: [
              {
                path: "/release",
                meta: { title: "我的发布" },
                menu: true,
                children: null,
              },
              {
                path: "/collection",
                meta: { title: "我的收藏" },
                menu: true,
                children: null,
              },
              {
                path: "/follow",
                meta: { title: "我的关注" },
                menu: true,
                children: null,
              },
              {
                path: "/followMy",
                meta: { title: "关注我的" },
                menu: true,
                children: null,
              },
            ],
          },
          {
            path: "/setting",
            icon: "el-icon-setting",
            meta: { title: "设置" },
            menu: true,
            children: [
              {
                path: "/editData",
                meta: { title: "编辑资料" },
                menu: true,
                children: null,
              },
              {
                path: "/changePassword",
                meta: { title: "修改密码" },
                menu: true,
                children: null,
              },
              {
                path: "/about",
                meta: { title: "关于" },
                menu: true,
                children: null,
              },
            ],
          },
        ];
        this.$store.commit("user/saveAuthorityMenus", menus);
        this.$store.commit(
          "user/saveOperator",
          Object.assign(this.form, result.data)
        );
        if (
          this.$route.query.redirect &&
          this.$route.query.name !== "notFound"
        ) {
          this.$router.replace(this.$route.query.redirect);
        } else {
          this.$router.replace("/");
        }
      }
    },
    async getSMScode() {
      let { telephone } = this.form;
      let reg =
        /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
      if (reg.test(telephone)) {
        let result = await this.$post("api/auth/sms/code", { telephone });
        if (result.code === 200) {
          this.countDown(60);
        }
      } else {
        this.$message.error("手机号码格式不正确");
      }
    },
    countDown(time) {
      if (time === 0) {
        this.disabledCodeBtn = false;
        this.codeText = "获取验证码";
        return;
      } else {
        this.disabledCodeBtn = true;
        this.codeText = "重新发送(" + time + ")";
        time--;
      }
      setTimeout(() => {
        this.countDown(time);
      }, 1000);
    },
    // 跳转
    link(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style lang="scss" scoped>
.root_login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 50px);

  .root_login_main {
    box-shadow: 0 0 10px $shadow;
    background-color: $white;
    position: relative;
    padding: 30px;
    height: 414px;
    width: 414px;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      border-top: 207px solid $mc;
      border-right: 414px solid transparent;
    }
    .tab {
      position: absolute;
      z-index: 1000;
      top: 0;
      right: 0;
      background: red;
    }
    .title {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;

      .name {
        margin-left: 10px;
        font-size: 18px;
        color: $white;
      }
    }

    .content {
      position: relative;
      margin-top: 60px;
      z-index: 10;

      .login-button {
        display: block;
        width: 100%;
      }

      .login-other {
        margin-bottom: 0;
        cursor: pointer;

        ::v-deep .el-form-item__content {
          display: flex;
          align-items: center;

          .attr {
            width: 100%;

            &:hover {
              color: $mc;
            }

            & + .attr {
              text-align: right;
            }
          }
        }
      }
    }
  }
}
</style>
